<template>
  <div class="official_box">
    <div class="official_title">选择公众号</div>
    <div :class="['official_item', item.id == state.active && 'active']" v-for="item in state.list" @click="handoff(item)">
      <el-image class="official_item_avatar" :src="item.head_img" fit="cover">
        <template #error>
          <el-icon>
            <icon-picture />
          </el-icon>
        </template>
      </el-image>
      <div :class="['official_item_name', item.id == state.active && 'active']">
        {{ item.nick_name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { getOfficeAccountList } from '@/api/channelconfig/officeAccount'
  import { reactive, onMounted } from 'vue'
  const emit = defineEmits(['submit'])
  const state = reactive({
    list: [],
    active: 0
  })
  // 获取公众号列表
  const getList = async () => {
    let params = { page: 1, page_size: 100, verify_type_info: 0 }
    const res: any = await getOfficeAccountList(params)
    state.list = res.data
    state.active = res.data[0]?.id || ''
    emit('submit', state.active)
  }
  // 切换公众号
  const handoff = (item: any) => {
    state.active = item.id
    emit('submit', item.id)
  }
  onMounted(() => {
    getList()
  })
</script>

<style scoped lang="scss">
  .official_box {
    width: 270px;
    height: 100%;
    background: #ffffff;
    border: 1px solid #eaeaea;

    .official_title {
      padding: 18px 24px;
      border-bottom: 1px solid #eaeaea;
    }

    .active {
      background: #fffaf9;
      color: #ff6b00 !important;
    }

    .official_item {
      padding: 14px 24px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .official_item_avatar {
        width: 36px;
        height: 36px;
        font-size: 36px;
        border-radius: 50%;
        border: 1px solid #0000000a;
        margin-right: 10px;
        color: #000;
      }

      .official_item_name {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
      }
    }
  }
</style>
